<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view style="padding-left: 40rpx;padding-right: 40rpx;">
				<!--				<view class="title">涉事人信息</view>-->
				<view>
					<view class="uni-form-item uni-column">
						<view class="uni-form-item uni-column">
							<view class="sub-title">开始日期</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker picker mode="date" :value="query.time_range_after" :start="startDate" :end="endDate" @change="bindStartTimeChange">
										<input class="uni-input" name="begin_time" :value="query.time_range_after" disabled />
									</picker>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="uni-form-item uni-column">
							<view class="sub-title">结束日期</view>
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker picker mode="date" :value="query.time_range_before" :start="startDate" :end="endDate" @change="bindEndTimeChange">
										<input class="uni-input" name="end_time" :value="query.time_range_before" disabled />
									</picker>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="sub-title">场所</view>
						<input class="uni-input" name="car_number" placeholder="请输入场所" v-model="query.motion_path__address"/>
						<view class="divider"></view>
					</view>
				</view>
				<view class="uni-btn-v" style="margin-bottom: 40rpx;">
					<button form-type="submit" @click="doQuery">查询</button>
				</view>
<!--				<view>-->
<!--					<uni-section :title="item.name" type="line"></uni-section>-->
<!--					<uni-collapse ref="add" class="warp" @change="change">-->
<!--						<uni-collapse-item :open="false" :show-animation="false" title="111111111">-->
<!--							<text class="content">1111111111111111111</text>-->
<!--						</uni-collapse-item>-->
<!--					</uni-collapse>-->
<!--				</view>-->
<!--				<view>-->
<!--					<uni-section title="马乙华" type="line"></uni-section>-->
<!--					<view class="example-body">-->
<!--						<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />-->
<!--					</view>-->
<!--				</view>-->
				<view>
					<view v-for="item in results">
						<uni-section :title="item.name" type="line"></uni-section>
						<view class="example-body">
							<uni-steps :options="item.list" active-color="#007AFF" :active="item.active" direction="column" />
						</view>
					</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	import uniSection from '@/components/uni-section/uni-section.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const listData = [{
					name: '基础用法',
					data: [{
						type: false,
						subName: '折叠内容',
						content: '折叠列表啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊内容，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					}]
				},
				{
					name: '添加动画效果',
					data: [{
						type: true,
						subName: '折叠列表',
						showAnimation: true,
						subList: [{
								title: '标题文字',
								thumb: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png'
							},
							{
								title: '标题文字',
								note: '描述信息',
								thumb: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png'
							},
							{
								title: '标题文字',
								showExtraIcon: true,
								extraIcon: {
									color: '#4cd964',
									size: '26',
									type: 'image'
								},
								showSwitch: true
							}
						]
					}]
				}
			]
			return {
				query:{
					pageSize:1000000,
					motion_path__address:"",
					time_range_after:currentDate,
					time_range_before:currentDate,
					status:1
				},
				list: listData,
				addressData: {},
				genderArray: ['男', '女'],
				credentials: ['身份证', '回乡证', '护照', "军官证", "同胞证", "港澳居民居住证"],
				credentialIndex: 0,
				genderIndex: 0,
				// startTime: currentDate,
				// endTime: currentDate,
				time: '12:01',
				cityPickerValueDefault: [0, 0, 0],
				pickerText: '',
				active: 3,
				list1: [{
					title: '事件一'
				}, {
					title: '事件二'
				}, {
					title: '事件三'
				}, {
					title: '事件四'
				}],
				list2: [{
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '卖家发货',
					desc: '2018-11-12'
				}, {
					title: '买家签收',
					desc: '2018-11-13'
				}, {
					title: '交易完成',
					desc: '2018-11-14'
				}],
				results:[

				]
			}
		},
		onLoad() {

		},
		components: {
			simpleAddress,
			uniCollapse,
			uniCollapseItem,
			uniSteps,
			uniSection,
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			doQuery(){
				this.$http.HttpGet("involverInfos/", this.query).then(res =>{
					this.results = []
					this.active = res.data.results.length-1;
					if(res.data.results.length === 0){
						uni.showToast({title:"查询无果", icon:"none"});
						return;
					}
					for(let i=0;i < res.data.results.length;i++){
						const item = res.data.results[i]
						const dataItem = {
							name:item.name,
							list:[],
							active:item.motion_path.length-1
						}
						for(let j=0;j<item.motion_path.length;j++){
							const motion = item.motion_path[j]
							dataItem.list.push({
								title: motion.address,
								desc: `${motion.begin_time} 至 ${motion.end_time}`
							})
						}
						this.results.push(dataItem)
					}
				})
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = e.label;
				this.addressData = e;
			},
			bindGenderChange: function(e) {
				this.genderIndex = e.target.value
			},
			bindCredentialChange: function(e) {
				this.credentialIndex = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindStartTimeChange: function(e) {
				this.query.time_range_after = e.target.value
			},
			bindEndTimeChange: function(e) {
				this.query.time_range_before = e.target.value
			},
			formSubmit: function(e) {
				const formData = e.detail.value;
			}
		}
	}
</script>

<style>
	input {
		height: 70rpx;
	}

	#from {
		padding-left: 100rpx;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	#ta-remark {
		min-height: 100rpx;
	}

	.radio {
		top: 50%;
		transform: translate(0%, 25%);
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.sub-title {
		font-size: 35rpx;
		margin-bottom: 25rpx;
	}

	.divider {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #DDDDDD;
		height: 1rpx;
		width: 100%;
		border: none;
	}

	.label {
		display: flex;
		position: relative;
	}
</style>
